<template>
  <view>
    <!-- 轮播图区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="2000" :duration="1000" :circular="true">
      <!-- 第一个轮播图 -->
        <swiper-item>
          <image src="../../static/lunbotu/R-C.jpg" style='width:100%'></image>
          <!-- <image src="../../images/list/R-C.jpg" style='width:100%'></image> -->
        </swiper-item> 
        <!-- 第二个轮播图 -->
        <swiper-item>
          <image src="../../static/lunbotu/2637.jpg_wh860.jpg" style='width:100%'></image>
        </swiper-item> 
        <!-- 第三个轮播图 -->
        <swiper-item>
          <image src="../../static/lunbotu/ABUIABACGAAgma3ymwYovJrF5AQwoAY4uwQ.jpg" style='width:100%'></image>
        </swiper-item> 
      </swiper>  
      
      <!-- 宫格区域 -->
      <view class="Grid">
        <view class="Grid-Item" v-for="(item,i) in GridList" :key="i" @click="navClickHandler(item)">
      	<!-- <navigator class="Grid-Item" v-for="item in GridList" :key="item.id" :url="'/subpkg/booking/booking?id=' + item.id"> @click="navClickHandler(item)-->
      		<image class="Image" :src="item.img"></image>
      	    <view class="GStitle">{{ item.name }}</view>
      	</view> 
      </view>
      
      <view class="floot_title">部分城市三甲医院</view>
      
      <!-- 楼层区域 -->
      <view class="Floor">
      	<navigator class="Floor-Item" v-for="item in floorList" :key="item.id" :url="'/subpkg/booking/booking?id=' + item.id">
      		<image class="FImage" :src="item.img"></image>
      	    <view class="FStitle">{{ item.title }}</view>
      	</navigator>
      </view>
      
      <!-- <image src="../../static/louceng/内蒙古中蒙医院.png" mode=""></image> -->
  </view>
</template>

<script>
     
  export default {
    data() {
      return {
        // 轮播图列表
        swiperList: [],
        
          
        // 宫格
        GridList: [
          		{id:1,img:'../../static/jiu/hospital (1).png',name:'预约陪诊'},
          		{id:2,img:'../../static/jiu/first-aid (1).png',name:'辅助买药'},
          		{id:3,img:'../../static/jiu/stethoscope (1).png',name:'代办问诊'},
          		{id:4,img:'../../static/jiu/pills-02 (1).png',name:'代办买药'},
          		{id:5,img:'../../static/jiu/送物.png',name:'送/取物服务'},
          		{id:6,img:'../../static/jiu/wheelchair (1).png',name:'出入院办理'},
            ],
            
        // 楼层数据
        floorList: [
          {id:1,img:'../../static/louceng/内蒙古自治区人民医院.png',title:'内蒙古自治区人民医院'},
          {id:2,img:'../../static/louceng/内蒙古医科大学附属医院.png',title:'内蒙古医科大学附属医院'},
          {id:3,img:'../../static/louceng/内蒙古中蒙医院.png',title:'内蒙古中蒙医院'}
        ]
        
      }
    },
    
    // 生命周期回调函数
    onLoad() {
      this.getFloorList()
    },
    
    methods: {
      navClickHandler(item) {
        if(item.name === '预约陪诊') {
          // uni.switchTab 
          uni.navigateTo ({
            // url: '/subpkg/booking/booking'
            url:'/subpkg/booking/booking'
          })
        }
      },
    
      
      getFloorList() {
        
      }
    }
  }
</script>

<style lang="scss">
swiper {
  height: 330rpx;
}

.Grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 15rpx 0;
  border-left: 1rpx solid #efefef;
  border-top: 1rpx solid #efefef;
  
  .Grid-Item {
    width: 50%;
    height: 200rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 1rpx solid #efefef;
    border-bottom: 1rpx solid #efefef;
    box-sizing: border-box;
  }
  
  .Image{
    width: 100rpx;
    height: 100rpx;
  }
  
  .GStitle {
    font-size: 24rpx;
    margin-top: 10rpx;
  }
}

.floot_title {
  margin: 10rpx;
  padding: 10rpx;
  font-style: italic;
  font-weight: bold;
  font-size: 40rpx;
  color: #00aa7f;
}

.Floor-Item {
  display: flex;
  padding: 15rpx;
  border: 1rpx solid #efefef;
  border-radius: 8rpx;
  margin: 15rpx;
  box-shadow: 1rpx 1rpx 15rpx #ddd;
  
  .FImage {
    width: 250rpx;
    height: 250rpx;
    display: block;
  }
  
  .FStitle {
    display: flex;
    flex-direction: column;
    flex-direction: column;
    font-weight: bold;
    padding: 50rpx;
    margin: 50rpx;
    margin-right: 5rpx;
  }
}
</style>
